<template>
  <el-dialog
    title="编辑"
    class="ocontent"
    :visible.sync="open"
    width="100rem"
    append-to-body
  >
    <div class="content">
      <!-- 上半部分 -->
      <div class="dia-top">
        <div class="ttop">
          <div class="dia-title">违规异常分布</div>
          <i class="el-icon-close" @click="open=false"></i>
        </div>
        <div class="tbottom">
          <div class="tb-left">
            <el-select size="mini" v-model="sel_value" placeholder="请选择">
              <el-option value="类型1"></el-option>
              <el-option value="类型2"></el-option>
              <el-option value="类型3"></el-option>
            </el-select>
            <ThingEcharts/>
          </div>
          <div class="tb-right">
            <div>
              <el-input size="mini" placeholder="请输入关键字" />
              <el-button size="mini">搜索</el-button>
            </div>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              height="68%"
              :header-cell-style="{ background: '#3B8BFF' }"
            >
              <el-table-column
                label="序号"
                type="index"
                align="center"
              ></el-table-column>
              <el-table-column label="责任单位" prop="workname" />
              <el-table-column label="责任人" prop="name"></el-table-column>
              <el-table-column label="监管对象" prop="IP"></el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="dia-bottom">
        <div class="ttop">
          <div class="dia-title">整体分析</div>
        </div>
        <el-table
          :data="tableData2"
          stripe
          style="width: 100%"
          height="68%"
          :header-cell-style="{ background: '#3B8BFF' }"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
          ></el-table-column>
          <el-table-column label="IP地址" prop="IP"></el-table-column>
          <el-table-column label="名称" prop="title"></el-table-column>
          <el-table-column label="类型" prop="type"></el-table-column>
          <el-table-column label="所在地区" prop="city"></el-table-column>
          <el-table-column label="责任单位" prop="workname" />
          <el-table-column label="责任人" prop="name"></el-table-column>
          <el-table-column label="重要程度/密级" prop="level"></el-table-column>
          <el-table-column label="操作" align="center">
            <template>
              <el-button size="mini" type="text"> 查看 </el-button>
            </template></el-table-column
          ></el-table
        >
                <pagination
              v-show="total1 > 0"
              :total="total1"
              :page.sync="queryParams1.pageNum"
              :limit.sync="queryParams1.pageSize"
              @pagination="getList1"
            />
      </div>
    </div>
  </el-dialog>
</template> 
     
</template>
<script>
import Pagination from "./Pagination.vue";
import ThingEcharts from "../echarts/dynamicCompliance/ThingEcharts.vue";
export default {
  components: { Pagination, ThingEcharts },
  props: [],
  data() {
    return {
      // 是否显示遮罩层
      open: false,
      sel_value: "",
      // 总条数
      total: 96,
      total1:52,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        name: "",
        productName: "",
      },
       queryParams1: {
        pageNum: 1,
        pageSize: 115,
        name: "",
        productName: "",
      },
      tableData: [
        {
          workname: "某单位名称",
          name: "李某某",
          IP: "101.10.1.112",
        },
        {
          workname: "某单位名称",
          name: "李某某",
          IP: "101.10.1.112",
        },
        {
          workname: "某单位名称",
          name: "李某某",
          IP: "101.10.1.112",
        },
        {
          workname: "某单位名称",
          name: "李某某",
          IP: "101.10.1.112",
        },
        {
          workname: "某单位名称",
          name: "李某某",
          IP: "101.10.1.112",
        },
      ],
      tableData2: [
        {
          IP: "101.10.1.112",
          name: "李某某",
          type: "未知",
          city: "济南市",
          title: "名称101",
          level: "重要",
          workname: "某单位名称",
        },
        {
          IP: "101.10.1.112",
          name: "李某某",
          type: "未知",
          city: "济南市",
          title: "名称101",
          level: "重要",
          workname: "某单位名称",
        },
        {
          IP: "101.10.1.112",
          name: "李某某",
          type: "未知",
          city: "济南市",
          title: "名称101",
          level: "重要",
          workname: "某单位名称",
        },
        {
          IP: "101.10.1.112",
          name: "李某某",
          type: "未知",
          city: "济南市",
          title: "名称101",
          level: "重要",
          workname: "某单位名称",
        },
        {
          IP: "101.10.1.112",
          name: "李某某",
          type: "未知",
          city: "济南市",
          title: "名称101",
          level: "重要",
          workname: "某单位名称",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    getList() { },
      getList1() {},
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.resetForm();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 0.875rem;
 color : rgba($color: #fff, $alpha:0.8);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // 上部分
  .dia-top {
    width: 100%;
    height: 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // 上
    .ttop {
      align-items: center;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.25rem;
      height: 12%;
      i {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        background-color: rgba($color: #3b8bff, $alpha: 0.5);
        border-radius: 4px;
      }
    }

    // 下
    .tbottom {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .tb-left {
        text-align: right;
        width: 48%;
        .el-select {
          width: 8rem;
          margin-bottom: 1.875rem;
        }
      }
      .tb-right {
        width: 48%;
        height: 100%;
        .el-input {
          width: 15rem;
          margin-right: 1.25rem;
        }
        .el-button {
          background: rgba(0, 225, 228, 0.2);
          border: 1px solid rgba(0, 225, 228, 0.4);
          border-radius: 4px;
         color : rgba($color: #fff, $alpha:0.8);
        }
      }
    }
  }
  // 下部分
  .dia-bottom {
    height: 48%;
    width: 100%;
    .el-table {
      width: 100%;
      height: 68%;
      overflow-y: scroll !important;
    }
  }
}
.dia-title {
  padding:.625rem;
  font-size: 1.375rem;
  width: 50%;
  background-image: linear-gradient(
    270deg,
    rgba(59, 139, 255, 0) 0%,
    rgba(109, 191, 255, 0.2) 100%
  );
}
::v-deep.el-dialog__header {
  display: none;
}
</style>
<style lang="scss">
.ocontent {
  .el-dialog {
    width: 100%;
    background: #050b4e;
        margin-top: 10vh !important;
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {

    padding: 1.25rem;
    height: 80vh;
  }
}
</style>